<!DOCTYPE html>
<html>
    <head>
        <style>
            * {box-sizing: border-box;}

            .row {
                display: flex;
                padding: 25px;
                flex-wrap: wrap;
            }


            .col-md-4 {
                width: calc(4 / 12 * 100% - 50px);
                height: 50px;
                border: 1px solid #999;
                background-color: #eee;
                margin: 25px;
            }


            .col-md-3 {
                width: calc(3 / 12 * 100% - 50px);
                height: 50px;
                border: 1px solid #999;
                background-color: #eee;
                margin: 25px;
            }

            .col-md-6 {
                width: calc(6 / 12 * 100% - 50px);
                height: 50px;
                border: 1px solid #999;
                background-color: #eee;
                margin: 25px;
            }

            .col-md-2 {
                width: calc(2 / 12 * 100% - 50px);
                height: 50px;
                border: 1px solid #999;
                background-color: #eee;
                margin: 25px;
            }

            .col-md-1 {
                width: calc(1 / 12 * 100% - 50px);
                height: 50px;
                border: 1px solid #999;
                background-color: #eee;
                margin: 25px;
            }

            .col-md-auto {
                width: auto;
                height: 50px;
                border: 1px solid #999;
                background-color: #eee;
                margin: 25px;
            }

            @media screen and (max-width:768px) {
                /* 当屏幕小于768px时,动态调整元素宽度 */
                .col-6 {
                    width: calc(6 / 12 * 100% - 50px);
                }

                .col-12 {
                    width: calc(12 / 12 * 100% - 50px);
                }

                .col-3 {
                    width: calc(3 / 12 * 100% - 50px);
                }

                .col-2 {
                    width: calc(2 / 12 * 100% - 50px);
                }

                .col-8 {
                    width: calc(8 / 12 * 100% - 50px);
                }
            }

        </style>
    </head>
    <body>
        <div class="row">
            <div class="col-md-4 col-6"></div>
            <div class="col-md-4 col-6"></div>
            <div class="col-md-4 col-12"></div>
            <div class="col-md-3 col-3"></div>
            <div class="col-md-6 col-6"></div>
            <div class="col-md-3 col-3"></div>
            <div class="col-md-1 col-2"></div>
            <div class="col-md-1 col-2"></div>
            <div class="col-md-2 col-8"></div>
            <div class="col-md-2 col-3"></div>
            <div class="col-md-6 col-3"></div>
        </div>
    </body>
</html>